<template>
  <div class="fromBox">
    <el-form inline label-width="auto">
      <el-form-item label="星座">
        <el-select
          v-model="value"
          placeholder="请选择星座"
          size="default"
          style="width: 240px">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-select
          v-model="time"
          placeholder="请选择日期"
          size="default"
          style="width: 240px">
          <el-option
            v-for="item in dateTime"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="select" plain>查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="conent">
    <div
      class="conentBox"
      v-show="time == 'today' && Object.keys(conentObj).length">
      <div><span class="text">星座：</span>{{ conentObj.name }}</div>
      <div><span class="text">日期：</span>{{ conentObj.datetime }}</div>
      <div><span class="text">幸运色：</span> {{ conentObj.color }}</div>
      <div><span class="text">健康指数：</span> {{ conentObj.health }}</div>
      <div><span class="text">概述：</span> {{ conentObj.summary }}</div>
    </div>
    <div
      class="conentBox"
      v-show="time == 'week' && Object.keys(conentObj).length">
      <div><span class="text">星座：</span>{{ conentObj.name }}</div>
      <div><span class="text">日期：</span>{{ conentObj.date }}</div>
      <div><span class="text">健康：</span> {{ conentObj.health }}</div>
      <div><span class="text">工作：</span> {{ conentObj.job }}</div>
      <div><span class="text">爱情：</span> {{ conentObj.love }}</div>
      <div><span class="text">财富：</span> {{ conentObj.money }}</div>
    </div>
    <div v-show="!Object.keys(conentObj).length">
      <el-empty description="快来查看自己的星座运势吧" />
    </div>
  </div>
</template>
<script setup>
import { horoscope } from "@/utils/freeAPI/api";
import { ref } from "vue";
let horoscopeText = ref("");
let option = ref([
  {
    label: "白羊座",
    value: "白羊座",
  },
  {
    label: "金牛座",
    value: "金牛座",
  },
  {
    label: "双子座",
    value: "双子座",
  },
  {
    label: "巨蟹座",
    value: "巨蟹座",
  },
  {
    label: "狮子座",
    value: "狮子座",
  },
  {
    label: "处女座",
    value: "处女座",
  },
  {
    label: "天秤座",
    value: "天秤座",
  },
  {
    label: "天蝎座",
    value: "天蝎座",
  },
  {
    label: "射手座",
    value: "射手座",
  },
  {
    label: "摩羯座",
    value: "摩羯座",
  },
  {
    label: "水瓶座",
    value: "水瓶座",
  },
  {
    label: "双鱼座",
    value: "双鱼座",
  },
]);
let value = ref("白羊座");

let dateTime = ref([
  {
    label: "今天",
    value: "today",
  },
  {
    label: "昨天",
    value: "tomorrow",
  },
  {
    label: "本周",
    value: "week",
  },
  {
    label: "本月",
    value: "month",
  },
  {
    label: "今年",
    value: "year",
  },
]);

let time = ref("today");

let conentObj = ref({});

let select = () => {
  let data = {
    consName: value.value,
    type: time.value,
  };
  horoscope(data).then((res) => {
    console.log(res);
    conentObj.value = res;
  });
};


</script>
<style scoped>
.fromBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.conent {
  display: flex;
  justify-content: center;
}
.conentBox {
  background: #FFD8EB;
  width: 80%;
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 0 4px #c44569;
}

.conentBox > div {
  margin: 10px 0;
}
.text{
  color: #f78fb3;
}
::v-deep .el-select__wrapper {
  background: #f6e8f5;
}
</style>
